.shortcut {
  width: 100%;
  height: 33px;
  line-height: 33px;
  background-color: #f1f1f1;
}
.shortcut-content {
  overflow: hidden;
  /* background-color: #00FFFF; */
}
.welcome a {
  color: var(--txtcl);
}
.welcome a:hover {
  color: #333;
}
.order-center li {
  float: left;
}
.order-center span {
  margin: 0 10px;
}
.order-center a:hover {
  color: #999;
}

/* logo区 */
.logo-area h1::after {
  content: "品优购";
  text-indent: -9999px;
  overflow: hidden;
  display: block;
}
.logo-area {
  margin: 28px auto 25px;
  /* overflow: hidden; */
}
.clear {
  clear: both;
}
h1 {
  float: left;
}
header h1 {
  margin-right: 175px;
}
.search input:first-child {
  width: 450px;
  height: 35px;
  border: 2px solid var(--bdcl);
  padding: 0 10px;
  box-sizing: border-box;
}
.search input:last-child {
  position: relative;
  left: -6px;
  top: 0.5px;
  width: 80px;
  height: 35px;
  background-color: var(--input);
  color: #fff;
  font-size: 16px;
  border: 0;
  cursor: pointer;
}
.card {
  position: relative;
  float: right;
  width: 140px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #dfdfdf;
  margin-right: 66px;
  background-color: #f7f7f7;
  cursor: pointer;
}
.card i:first-child {
  color: #da5555;
  font-size: 18px;
  font-weight: bold;
}
.card .text:hover {
  color: #999;
}
.card .badge {
  position: absolute;
  right: 26px;
  top: -6px;
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  border-radius: 7px 8px 7px 1px;
  background-color: #e60012;
  color: #fff;
  text-align: center;
  font-size: 12px;
}

/*导航栏*/
nav {
  overflow: hidden;
  width: 100%;
  border-bottom: 2px solid var(--bdcl);
  font-size: 16px;
}
.category-title {
  width: 210px;
  height: 45px;
  line-height: 45px;
  background-color: var(--bdcl);
  color: #fff;
  text-align: center;
}
/*分类一级导航*/
.category-nav-list {
  position: absolute;
  width: 210px;
  height: 400px;
  background-color: var(--txtcl);
}
.category-nav-list .category-nav-item {
  line-height: 30px;
  font-size: 14px;
  transition: all 0.7s;
}
.category-nav-list .category-nav-item .category-name a {
  display: inline-block;
  padding-left: 10px;
  width: 170px;
  height: 100%;
  color: #fff;
}
.category-nav-item:hover {
  background-color: #fff;
}
.category-nav-item .category-name a {
  transition: all 0.7s;
}
.category-nav-item:hover .category-name a {
  color: var(--txtcl);
  padding-left: 20px;
}
.category-nav-list .category-nav-item .category-name i {
  color: #fff;
  font-size: 12px;
}
/*分类二级导航*/
.category-subnav-list {
  display: none;
  position: absolute;
  left: 210px;
  top: 3px;
  width: 520px;
  height: 397px;
  background-color: #f7f7f7;
  z-index: 99;
}
.category-nav-item:hover .category-subnav-list {
  display: block;
}
.category-subnav-list li {
  padding: 10px 0 0 15px;
}
.category-subnav-list img {
  height: 45px;
}
.category-subnav-list span {
  position: relative;
  top: -17px;
  font-size: 12px;
}
.main-nav a {
  display: inline-block;
  width: 90px;
  height: 45px;
  line-height: 45px;
  text-align: center;
}
.main-nav a:hover {
  color: #999;
}
.main-nav li {
  float: left;
}

/* 轮播图 */
.carousel {
  position: relative;
}
.swiper {
  position: absolute;
  left: 220px;
  top: 10px;
  width: 980px;
  height: 390px;
}
.swiper img {
  width: 100%;
  height: 100%;
}

/*main*/
main {
  padding-top: 400px;
}
.category .goods-list .goods-item h3:hover {
  color: gray;
}
.category-title-name {
  overflow: hidden;
  margin-top: 30px;
  border-bottom: 2px solid var(--txtcl);
  padding-bottom: 5px;
}
.category-title-name h3 {
  font-size: 18px;
  font-weight: normal;
  color: var(--txtcl);
  margin-right: 36px;
}
.category-small li {
  position: relative;
  left: 0;
  top: 7px;
  float: left;
  margin-right: 30px;
  font-size: 12px;
}
.category-small li:hover a,
.more:hover a {
  color: #999;
}
.more {
  margin-right: 10px;
}
.goods-list {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.goods-list .goods-item {
  width: 224px;
  height: 288px;
  background-color: #f7f7f7;
  text-align: center;
}
.goods-list .goods-item img {
  width: 140px;
  height: 142px;
  margin-top: 54px;
}
.goods-list .goods-item h3 {
  font-size: 16px;
  font-weight: normal;
}
.price {
  font-size: 14px;
  color: var(--txtcl);
  line-height: 40px;
}

/* footer部分 */
footer {
  width: 100%;
  background-color: #f5f5f5;
  margin-top: 20px;
}
.service {
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  padding: 30px 0;
  border-bottom: 1px solid #ccc;
}
/* 
精灵图:sprites(雪碧图) 把多个小的图标或图形放在一个图片文件中(.png),
使用时通过坐标获取，目的是为了减少请求次数，从而达到网站性能优化的目标。
注意：精灵图只能以背景图的形式加载。

精灵图是一个整合了很多个小背景图标的大背景图。
  作用：是为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。
  精灵图也称作CSS sprites、CSS雪碧等。
  用法：与遮罩有些类似，通过移动大背景图的位置来显示目标小背景图。

  需要测量的两个数值：
    小图标的宽和高；
    小图标距离大图片左上角的x轴和y轴的值。（其中x轴是大图片上边框，y轴是大图片的左边框）
*/
.service li span {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-image: url(../img/icons.png);
}
.service li:nth-child(1) span {
  background-position: -253px -3px;
}
.service li:nth-child(2) span {
  background-position: -255px -54px;
}
.service li:nth-child(3) span {
  background-position: -257px -106px;
}
.service li:nth-child(4) span {
  background-position: -258px -157px;
}
.service li:nth-child(5) span {
  background-position: -257px -209px;
}
.service h3,
.service p {
  font-size: 14px;
  font-weight: normal;
  color: #666;
  line-height: 25px;
}
.help {
  display: flex;
  justify-content: space-around;
  padding: 25px 0 20px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
.help dt {
  font-size: 16px;
  line-height: 30px;
}
.help dd {
  line-height: 25px;
}
.help dd:hover a {
  color: #999;
}
/* 版权 */
.link-addr {
  padding: 10px 0 30px;
  text-align: center;
  color: #333;
}
.link {
  line-height: 40px;
}
.link li {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}
.link li:hover a {
  color: #999;
}
.link li:not(:first-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 13px;
  border-right: 1px solid #333;
  position: absolute;
  left: -9px;
  top: 14px;
}

/* 侧边栏 */
aside {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 65px;
  margin: -108px 0 0 -675px;
  background-color: #fff;
  text-align: center;
  font-size: 12px;
  color: #333;
  display: none;
}
aside a {
  width: 100%;
  display: block;
}
aside li,
aside .to-top {
  line-height: 30px;
}
aside li {
  border-bottom: 1px solid #ccc;
}
aside .to-top {
  font-size: 14px;
}
aside .to-top:hover a {
  color: #999;
}
.active {
  background-color: var(--txtcl);
}
.active a {
  color: #fff;
}
